<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="EduBot - 智能教育评估系统，提供专业的教育教学评估服务">
    <meta name="keywords" content="EduBot,智能教育,教学评估,AI教育,教育小助手,智能学习,课堂评测,教学质量,学习效果,数据分析,教学反馈,智能反馈,教育助手,智能教育系统">
    <title>EduBot - 智能教育评估系统</title>
    <link rel="icon" href="{{ url_for('static', filename='icons/AiKeTangJiaoXuePingCeXiTong.png') }}" type="image/png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>
        :root {
            --_rs-theme-dark: var(--_rs-internal-force-theme-dark-consult-rescui-before-using, var(--rs-theme-dark, 0));
            --_rs-theme-flip: var(--rs-theme-flip, 0);
            --_rs-theme-dark-coefficient: calc(var(--_rs-theme-dark) * (1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip) * (1 - var(--_rs-theme-dark)));
            --_rs-theme-light-coefficient: calc(1 - var(--_rs-theme-dark-coefficient));
            --rs-text-base-letter-spacing: 0.08em;
            --_rs-typography-letter-spacing: 0.08em;
            --_rs-typography-text-transform: none;
            --_rs-typography-font-family: 'Segoe UI', 'Arial', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            --_rs-typography-font-size: 2.2rem;
            --_rs-typography-font-weight: bold;
            --_rs-typography-line-height: 1.2;
            --_rs-typography-font-variant-numeric: normal;
            --_rs-typography-base-color: #fff;
            --_rs-typography-subtitle-font-size: 3.3rem;
            --_rs-typography-custom-font-size: 1.8rem;
            --_rs-typography-custom-font-weight: 300;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background: #000;
        }

        .fixed-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: var(--site-header-bg,var(--rs-color-black,#19191c));
            color: #fff;
            padding: 1rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: #fff;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .logo img {
            height: 2.2rem;
            width: 2.2rem;
            display: block;
        }

        .logo span {
            font-size: 1.5rem;
            font-weight: bold;
            color: #fff;
            letter-spacing: 0.04em;
        }

        .nav-links {
            display: flex;
            gap: 2.5rem;
        }

        .nav-links a {
            color: #cccccc;
            text-decoration: none;
            font-size: 1.15rem;
            font-weight: 400;
            letter-spacing: 0.06em;
            transition: color 0.2s;
        }

        .nav-links a:hover {
            color: #f2f2f2;
        }

        .nav-links a i {
            margin-right: 0.5em;
            font-size: 1.1em;
            vertical-align: middle;
        }

        .main-content {
            margin-top: 80px;
            padding: 2%;
        }

        .icon-title-row {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            margin-left: 0;
            margin-top: 5%;
            gap: 0.2%;
            max-width: 1200px;
            margin: 16px auto 0;
            padding: 0 1%;
            width: 100%;
            position: relative;
        }
        .icon-title-text {
            letter-spacing: var(--rs-text-base-letter-spacing, var(--_rs-typography-letter-spacing));
            text-transform: var(--_rs-typography-text-transform);
            font-family: var(--_rs-typography-font-family);
            font-size: var(--_rs-typography-font-size);
            font-weight: var(--_rs-typography-font-weight);
            line-height: var(--_rs-typography-line-height);
            font-variant-numeric: var(--_rs-typography-font-variant-numeric);
            font-feature-settings: "kern", "liga", "calt";
            color: var(--_rs-typography-base-color);
            padding-top: 1%;
            display: flex;
            flex-direction: column;
            gap: 3%;
        }
        .subtitle-text {
            --_rs-theme-dark: var(--_rs-internal-force-theme-dark-consult-rescui-before-using, var(--rs-theme-dark, 0));
            --_rs-theme-flip: var(--rs-theme-flip, 0);
            --_rs-theme-dark-coefficient: calc(var(--_rs-theme-dark) * (1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip) * (1 - var(--_rs-theme-dark)));
            --_rs-theme-light-coefficient: calc(1 - var(--_rs-theme-dark-coefficient));
            letter-spacing: var(--rs-text-base-letter-spacing, var(--_rs-typography-letter-spacing));
            text-transform: var(--_rs-typography-text-transform);
            font-family: var(--_rs-typography-font-family);
            font-size: var(--_rs-typography-subtitle-font-size);
            font-weight: var(--_rs-typography-font-weight);
            line-height: var(--_rs-typography-line-height);
            font-variant-numeric: var(--_rs-typography-font-variant-numeric);
            font-feature-settings: "kern", "liga", "calt";
            color: var(--_rs-typography-base-color);
            margin-top: 3%;
        }
        .custom-text {
            --_rs-theme-dark: var(--_rs-internal-force-theme-dark-consult-rescui-before-using, var(--rs-theme-dark, 0));
            --_rs-theme-flip: var(--rs-theme-flip, 0);
            --_rs-theme-dark-coefficient: calc(var(--_rs-theme-dark) * (1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip) * (1 - var(--_rs-theme-dark)));
            --_rs-theme-light-coefficient: calc(1 - var(--_rs-theme-dark-coefficient));
            letter-spacing: var(--rs-text-base-letter-spacing, var(--_rs-typography-letter-spacing));
            text-transform: var(--_rs-typography-text-transform);
            font-family: var(--_rs-typography-font-family);
            font-size: var(--_rs-typography-custom-font-size);
            font-weight: var(--_rs-typography-custom-font-weight);
            line-height: var(--_rs-typography-line-height);
            font-variant-numeric: var(--_rs-typography-font-variant-numeric);
            font-feature-settings: "kern", "liga", "calt";
            color: var(--_rs-typography-base-color);
            margin-top: 4%;
        }
        .icon-glow-wrapper {
            position: absolute;
            right: 1%;
            top: 2%;
            width: 240px;
            height: 240px;
            max-width: 12%;
            min-width: 112px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .icon-glow-bg {
            position: absolute;
            top: 35%;
            left: 27%;
            width: 50%;
            height: 25%;
            background: 
                radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.5) 100%),
                radial-gradient(circle at 20% 30%, #00fff7cc 0%, transparent 60%),
                radial-gradient(circle at 80% 40%, #ff00eacc 0%, transparent 60%),
                radial-gradient(circle at 50% 80%, #39ff14cc 0%, transparent 60%),
                radial-gradient(circle at 70% 70%, #ffe600cc 0%, transparent 60%),
                radial-gradient(circle at 30% 60%, #ff5e62cc 0%, transparent 60%),
                radial-gradient(circle at 60% 20%, #00b3ffcc 0%, transparent 60%),
                radial-gradient(circle at 40% 80%, #ff9100cc 0%, transparent 60%),
                radial-gradient(circle at 15% 85%, #d500f9cc 0%, transparent 60%),
                radial-gradient(circle at 85% 15%, #00ff94cc 0%, transparent 60%),
                radial-gradient(circle at 75% 60%, #8c52ffcc 0%, transparent 60%),
                radial-gradient(circle at 35% 25%, #ff1744cc 0%, transparent 60%),
                radial-gradient(circle at 55% 45%, #00ffd0cc 0%, transparent 60%);
            background-size: 200% 200%;
            background-repeat: no-repeat;
            animation: iconGlowFloat 2s linear infinite;
            z-index: 1;
            filter: blur(0.5px);
            border-radius: 6px;
        }
        .icon-glow-img {
            position: relative;
            z-index: 2;
            display: block;
            width: 100%;
            height: auto;
        }
        @keyframes rotate-glow {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }
        @keyframes iconGlowFloat {
            0% {
                background-position: 0% 0%, 100% 0%, 50% 100%, 100% 100%, 0% 100%;
            }
            50% {
                background-position: 100% 100%, 0% 100%, 100% 0%, 0% 0%, 100% 0%;
            }
            100% {
                background-position: 0% 0%, 100% 0%, 50% 100%, 100% 100%, 0% 100%;
            }
        }
        @media (max-width: 768px) {
            .nav-links {
                gap: 1.2%;
            }
            .logo span {
                font-size: 1.1rem;
            }
            .nav-links a {
                font-size: 0.95rem;
            }
            .icon-glow-wrapper {
                max-width: 20%;
                height: auto;
                min-width: 18px;
            }
            .icon-title-row {
                gap: 1.2%;
            }
            .icon-title-text {
                font-size: 1.2rem;
            }
            .content-block {
                flex-direction: column;
                gap: 6%;
            }
            .mini-card {
                width: 38%;
                min-width: 30%;
                font-size: 0.95rem;
                padding: 0.5% 1%;
            }
            /* 添加老师展示区域的移动端适配 */
            .teacher-container {
                flex-direction: column;
                gap: 4%;
            }
            .teacher-container > div {
                width: 100% !important;
                margin-bottom: 4%;
            }
            .teacher-container img {
                max-width: 80%;
                margin: 0 auto;
            }
            .subtitle-text {
                font-size: 1.5rem;
            }
            .nav-links a span {
                display: none;
            }
            .nav-links a i {
                font-size: 256%;
            }
            .edubot-style {
                font-size: 128% !important;
            }
            .icon-glow-bg {
                top: 27%;
                height: 35%;
            }
            .custom-text {
                font-size: 1.2rem;
            }
            .experience-desc {
                font-size: 1rem !important;
            }
            .let_each_line_of_code_reconstruct_the_cornerstone_of_human_civilization {
                font-size: 128% !important;
            }
            .technology_should_not_be_a_cold_symbol_but_a_tinder_for_the_leap_of_cilivilization_reconstructing_the_cognitive_frontier_with_star-level_algorithms_and_reshaping_the_future_of_education_with_quantum_computing_power {
                font-size: 85% !important;
            }
            /* 添加人群密度监测标题的移动端适配 */
            .section-title {
                font-size: 1.3rem !important;
            }
            /* 添加智能扩展功能块的移动端适配 */
            .fa-robot, .fa-diagram-project, .fa-clipboard-question, .fa-clipboard-list {
                font-size: 1.4rem !important;
            }
            div[style*="font-size: 2rem; font-weight: bold; color: #fff; letter-spacing: 0.08em;"] {
                font-size: 1.1rem !important;
            }
            /* 添加详细信息的移动端适配 */
            div[style*="font-size: 1rem; color: #fff; letter-spacing: 0.04em; line-height: 1.6;"] {
                font-size: 0.9rem !important;
                line-height: 1.4 !important;
            }
            /* 添加老师信息块的移动端适配 */
            div[style*="width: 32%; background: #01191a; border-radius: 1rem; padding: 2%; display: flex; flex-direction: column; align-items: flex-start; height: 100%;"] {
                width: 100% !important;
                margin-bottom: 4%;
            }
            /* 添加老师名字和职位的移动端适配 */
            div[style*="display: flex; align-items: center; gap: 4%; width: 100%;"] {
                justify-content: center !important;
            }
            div[style*="display: flex; align-items: center; gap: 4%; width: 100%;"] > div[style*="text-align: left;"] {
                text-align: center !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
            }
        }
        .experience-button {
            margin-top: 6%;
            padding: 1% 2%;
            background: linear-gradient(45deg, #21797a, #21797a);
            border: none;
            border-radius: 1.2rem;
            color: #fff;
            font-size: 1.2rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
            box-shadow: 0 2px 12px rgba(33, 121, 122, 0.3);
            width: 16%;
            max-width: 40%;
            min-width: 110px;
        }
        .experience-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(33, 121, 122, 0.4);
            background: linear-gradient(45deg, #21797a, #21797a);
        }
        .experience-desc {
            margin-top: 2%;
            font-size: 55%;
            color: #a2adb3;
            letter-spacing: 0.08em;
            text-align: left;
            font-family: var(--_rs-typography-font-family);
            font-weight: 400;
            opacity: 0.85;
        }
        .content-block {
            max-width: 1200px;
            margin: 5% auto 0;
            padding: 0 1%;
            width: 100%;
            background: #01191a;
            border-radius: 1rem;
            padding: 0.5% 1% 0.1% 1%;
            display: flex;
            gap: 1.5%;
            justify-content: flex-start;
            flex-wrap: wrap;
        }
        .mini-card {
            background: #01888a;
            color: #fff;
            border-radius: 0.5rem;
            width: auto;
            min-width: 10%;
            max-width: 100%;
            margin-bottom: 2%;
            padding: 0.1% 1%;
            box-shadow: 0 2px 8px rgba(1,25,26,0.06);
            font-size: 0.95rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            transition: box-shadow 0.2s;
        }
        .mini-card:hover {
            box-shadow: 0 4px 16px rgba(1,25,26,0.12);
        }
        @keyframes float {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-10px);
            }
            100% {
                transform: translateY(0px);
            }
        }
        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }
        .edubot-style {
            font-size: 3.2rem;
        }
        .let_each_line_of_code_reconstruct_the_cornerstone_of_human_civilization {
            font-size: 2.2rem; font-weight: 500; color: #fff; margin-bottom: 1.2%; text-align: left; letter-spacing: 0.04em; width: 100%;
        }
        .technology_should_not_be_a_cold_symbol_but_a_tinder_for_the_leap_of_cilivilization_reconstructing_the_cognitive_frontier_with_star-level_algorithms_and_reshaping_the_future_of_education_with_quantum_computing_power {
            font-size: 1.65rem; font-weight: 400; color: #fff; margin: 0 0 3% 0; text-align: left; letter-spacing: 0.04em; line-height: 1.1; width: 100%;
        }
        
    </style>
</head>
<body>
    <header class="fixed-header">
        <div class="header-content">
            <a href="/" class="logo" style="display: flex; align-items: center; gap: 0.5rem;">
                <img id="workshop-icon" src="" alt="EduBot Logo" style="height:2.2rem;width:2.2rem;display:block;">
                <span style="display: flex; flex-direction: column; line-height: 1.1; align-items: flex-start; justify-content: center;">
                    <span style="font-size: 1rem; font-weight: 400; color: #fff; letter-spacing: 0.04em; margin-bottom: 4%;">厦门工学院</span>
                    <span style="font-size: 1rem; font-weight: 400; color: #fff; letter-spacing: 0.04em;">人工智能创作坊</span>
                </span>
            </a>
            <nav class="nav-links">
                <a href="#" id="nav-center-link"><i class="fa-solid fa-compass"></i><span>导航中心</span></a>
                <a href="/contact"><i class="fa-solid fa-envelope"></i><span>联系我们</span></a>
                <a href="/suggest"><i class="fa-solid fa-comment-dots"></i><span>用户建议</span></a>
            </nav>
        </div>
    </header>

    <main class="main-content">
        <h1 style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;">EduBot</h1>
        <div class="icon-title-row">
            <div class="icon-title-text">
                <span style="display: flex; flex-direction: column; gap: 1%;">
                    <span class = 'edubot-style'>EduBot</span>
                    <span style="font-size: 1.8rem; color: #fff; font-weight: 400;">教育新形态的缔造者</span>
                </span>
                <span class="subtitle-text" style="margin-top: 4% !important;">以量子级认知架构重塑教育维度</span>
                <span class="subtitle-text" style="margin-top: 0%;">打造教育生态的终极形态</span>
                <span class="custom-text" style="margin-top: 4%;">专为教育者定制</span>
                <a href="#" id="experience-link" class="experience-button">立即体验</a>
                <div class="experience-desc">体验智能与创新的教育新纪元</div>
            </div>
            <div class="icon-glow-wrapper">
                <div class="icon-glow-bg"></div>
                <img id="edubot-icon" src="" alt="EduBot图标" class="icon-glow-img">
            </div>
        </div>
        <div class="content-block" style="flex-direction: column;">
            <div class = "let_each_line_of_code_reconstruct_the_cornerstone_of_human_civilization">让每一行代码重构人类文明的基石</div>
            <div class = "technology_should_not_be_a_cold_symbol_but_a_tinder_for_the_leap_of_cilivilization_reconstructing_the_cognitive_frontier_with_star-level_algorithms_and_reshaping_the_future_of_education_with_quantum_computing_power">
                科技不应是冰冷的符号，而是文明跃迁的火种<br>以星辰级算法重构认知边疆，以量子态算力重塑教育未来
            </div>
            <div style="display: flex; flex-wrap: wrap; gap: 1.5%; width: 100%;">
                <div class="mini-card">PPTX思维导图</div>
                <div class="mini-card">PPTX生成题目</div>
                <div class="mini-card">实时统计人数</div>
                <div class="mini-card">使用手机行为检测</div>
                <div class="mini-card">站立行为检测</div>
                <div class="mini-card">趴桌行为检测</div>
                <div class="mini-card">抬头行为检测</div>
                <div class="mini-card">小智（智能助手）</div>
                <div class="mini-card">PPTX生成教案</div>
            </div>
        </div>
    </main>
    <div style="width: 100%; max-width: 1200px; margin: 3% auto 2% auto; text-align: left; font-size: 2.6rem; font-weight: bold; color: #fff; letter-spacing: 0.08em; padding-left: 1%;" class="section-title">AI 驱动的人群密度动态监测与计数</div>
    <div id="people-carousel" style="width: 100%; max-width: 1200px; margin: 0 auto 4% auto; position: relative; overflow: hidden; border-radius: 1.2rem; background: #111; aspect-ratio: 16/9;">
        <img id="carousel-img-1" src="" alt="人员检测示例1" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; background: #111; transition: opacity 1.5s cubic-bezier(0.4,0,0.2,1); opacity: 1; z-index: 2;">
        <img id="carousel-img-2" src="" alt="人员检测示例2" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; background: #111; transition: opacity 1.5s cubic-bezier(0.4,0,0.2,1); opacity: 0; z-index: 1;">
    </div>

    <div style="width: 100%; max-width: 1200px; margin: 6% auto 2% auto; text-align: left; font-size: 2.6rem; font-weight: bold; color: #fff; letter-spacing: 0.08em; padding-left: 1%;" class="section-title">智能扩展功能</div>

    <div style="
        width: 100%; max-width: 1200px; margin: 0 auto 2% auto; text-align: left; padding-left: 1%; display: flex; gap: 4%;
    ">
        <div style="width: 48%; background: #01191a; border-radius: 1.2rem; padding: 0.5% 2% 2% 2%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;">
            <div style="display: flex; align-items: center; width: 100%; gap: 4%;">
                <i class="fa-solid fa-robot" style="font-size: 3rem; color: #fff"></i>
                <div style="
                    font-size: 2rem; font-weight: bold; color: #fff; letter-spacing: 0.08em;
                ">
                    小智
                </div>
            </div>
            <div style="
                font-size: 1rem; color: #fff; letter-spacing: 0.04em; line-height: 1.6; margin-top: 2%; width: 100%;
            ">智能对话服务，涵盖 EduBot 相关问题及更广泛的学术支持。页面两侧设有快捷通道，支持一键直达DeepSeek、文心一言、通义千问、ChatGPT、Claude等主流大语言模型，实现跨平台智能对话的无缝切换</div>
        </div>
        <div style="width: 48%; background: #01191a; border-radius: 1.2rem; padding: 2%;">
            <div style="display: flex; align-items: center; gap: 4%; margin-bottom: 2%;">
                <i class="fa-solid fa-diagram-project" style="font-size: 2.5rem; color: #fff"></i>
                <div style="font-size: 2rem; font-weight: bold; color: #fff; letter-spacing: 0.08em;">PPTX 生成思维导图</div>
            </div>
            <div style="font-size: 1rem; color: #fff; letter-spacing: 0.04em; line-height: 1.6;">PPTX文件智能解析，通过AI技术自动提取内容脉络，精准提炼关键信息，生成结构化的可视化思维导图，直观呈现逻辑层次，助力用户高效梳理框架要点，实现一键式知识体系转化与多场景应用，全面提升学习效率与工作效能。</div>
        </div>
    </div>

    <div style="
        width: 100%;
        max-width: 1200px;
        margin: 2% auto 2% auto;
        text-align: left;
        padding-left: 1%;
        display: flex; gap: 4%;
">
        <div style="width: 48%; background: #01191a; border-radius: 1.2rem; padding: 0.5% 2% 2% 2%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;">
            <div style="display: flex; align-items: center; width: 100%; gap: 4%;">
                <i class="fa-solid fa-clipboard-question" style="font-size: 3rem; color: #fff"></i>
                <div style="font-size: 2rem; font-weight: bold; color: #fff; letter-spacing: 0.08em;">
                    PPTX 生成题目
                </div>
            </div>
            <div style="font-size: 1rem; color: #fff; letter-spacing: 0.04em; line-height: 1.6; margin-top: 2%; width: 100%;">
                支持上传PPTX文件或填写具体需求，智能生成高质量题目与配套解析，助力教师高效备课，显著提升出题效率与教学效果。
            </div>
        </div>
        <div style="width: 48%; background: #01191a; border-radius: 1.2rem; padding: 2%;">
            <div style="display: flex; align-items: center; gap: 4%; margin-bottom: 2%;">
                <i class="fa-solid fa-clipboard-list" style="font-size: 3rem; color: #fff"></i>
                <div style="font-size: 2rem; font-weight: bold; color: #fff; letter-spacing: 0.08em;">
                    PPTX 生成教案
                </div>
            </div>
            <div style="font-size: 1rem; color: #fff; letter-spacing: 0.04em; line-height: 1.6;">
                支持上传PPTX文件自动识别教学内容，亦可灵活输入教学目标、重难点、教学方法等关键信息，系统将为您快速生成结构清晰、格式规范的教学设计方案，助力教师高效备课。
            </div>
        </div>
    </div>

    <div style="width: 100%; max-width: 1200px; margin: 6% auto 2% auto; text-align: left; font-size: 2.6rem; font-weight: bold; color: #fff; letter-spacing: 0.08em; padding-left: 1%;" class="section-title">首席学术架构师</div>

    <div id="qrModal" style="display:none;position:fixed;z-index:2000;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.7);justify-content:center;align-items:center;">
        <div style="background:#19191c;border-radius:1rem;padding:2rem 1.5rem;box-shadow:0 4px 32px #000a;display:flex;flex-direction:column;align-items:center;max-width:90vw;max-height:90vh;">
            <img id="qr-code-img" src="" alt="微信二维码" style="max-width:60vw;max-height:60vh;border-radius:0.5rem;">
            <button id="closeQrModal" style="margin-top:1.5rem;background:none;border:none;color:#fff;font-size:1.2rem;cursor:pointer;">关闭</button>
        </div>
    </div>

    <div class="teacher-container" style="width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: stretch; padding: 0 1%; gap: 2%;">
        <div style="width: 32%; background: #01191a; border-radius: 1rem; padding: 2%; display: flex; flex-direction: column; align-items: flex-start; height: 100%;">
            <div style="display: flex; align-items: center; gap: 4%; width: 100%;">
                <img id="teacher-wang-lin" src="" alt="王林" style="width: 32%; border-radius: 50%; object-fit: cover; aspect-ratio: 1/1;">
                <div style="text-align: left;">
                    <div style="color: #fff; font-size: 1.4rem; font-weight: 500; margin-bottom: 1%;">王林</div>
                    <div style="color: #fff; font-size: 0.8rem; font-weight: 300; line-height: 1.4;">
                        人工智能学院副院长<br>
                        人工智能研究院副院长<br>
                        人工智能创作坊主任<br>
                        AI 教学部主任
                    </div>
                </div>
            </div>
            <div style="color: #fff; font-size: 0.95rem; line-height: 1.7; margin-top: 4%; word-break: break-all; width: 100%;">
                教授，博士生导师。本科、硕士和博士均毕业于西北工业大学，博士专业为模式识别与智能系统。先后担任西北工业大学和西安邮电大学校级学术委员会委员、西安邮电大学计算机系副主任以及西安理工大学学术带头人。
                <div style="margin-top: 1.7em;">
                    研究领域包括计算机视觉、大数据应用、无线传感器网络和复杂网络等，已培养研究生 180 余名。以第一作者在科学出版社出版学术专著 2 部；作为主编在机械工业出版社出版 "十三五" 国家重点出版规划教材一部；共发表包括高被引论文在内的学术论文 100 余篇，获得国家发明专利 10 项，软件著作权 3 项。主持省级重点产业链项目；为教育部学位论文评审专家。曾获厦门工学院优秀教师等奖项。
                </div>
            </div>
        </div>
        <div style="width: 32%; background: #01343b; border-radius: 1rem; padding: 2%; display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding-bottom: 2.3%;">
            <div style="display: flex; align-items: center; gap: 4%; width: 100%;">
                <img id="teacher-wang-fei-fan" src="" alt="王飞帆" style="width: 32%; border-radius: 50%; object-fit: cover; aspect-ratio: 1/1;">
                <div style="text-align: left;">
                    <div style="color: #fff; font-size: 1.4rem; font-weight: 500; margin-bottom: 1%;">王飞帆</div>
                    <div style="color: #fff; font-size: 0.8rem; font-weight: 300; line-height: 1.4;">
                        人工智能创作坊导师<br>
                        人工智能学院副教授
                    </div>
                </div>
            </div>
            <div style="color: #fff; font-size: 0.95rem; line-height: 1.7; margin-top: 4%; word-break: break-all; width: 100%;">
                中共党员，2010 年于解放军信息工程大学获得电子信息工程学士学位，2013 年于南京信息工程大学获得系统科学硕士学位，2018 年于北京理工大学获得控制科学与工程博士学位，博士后加入静息态 MRI 创始人 Biswal 教授团队从事 AI 医疗影像分析相关工作。具有多年 AI + 医疗等行业研发经验，曾主持/参与多款产品研发、上线。
                <div style="margin-top: 1.7em;">
                    主要研究内容包括但不限于复杂网络社区结构分析、脑肿瘤分割、冠脉三维重建、药品识别检测。以第一作者发表 SCI 论文 7 篇，顶会论文 1 篇，EI 论文 3 篇，核心期刊论文 2 篇；以第一作者公开发明专利 9 项授权 2 项；曾参与国家重点研发计划一项、国家自然科学基金一项。
                </div>
            </div>
        </div>
        <div style="width: 32%; background: #012825; border-radius: 1rem; padding: 2%; display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding-bottom: 9%;">
            <div style="display: flex; align-items: center; gap: 4%; width: 100%;">
                <img id="teacher-xie-zhi-xin" src="" alt="谢智新" style="width: 32%; border-radius: 50%; object-fit: cover; aspect-ratio: 1/1;">
                <div style="text-align: left;">
                    <div style="color: #fff; font-size: 1.4rem; font-weight: 500; margin-bottom: 1%;">谢智新</div>
                    <div style="color: #fff; font-size: 0.8rem; font-weight: 300; line-height: 1.4;">
                        人工智能创作坊实验员
                    </div>
                </div>
            </div>
            <div style="color: #fff; font-size: 0.95rem; line-height: 1.7; margin-top: 4%; word-break: break-all; width: 100%;">
                致力于三维重建与神经网络技术的前沿研究与产业应用探索。研究方向聚焦于深度学习驱动的复杂场景三维重建优化，通过神经网络算法突破非结构化数据处理的技术瓶颈，推动 AI 技术在数字孪生、文化遗产数字化等领域的创新落地。
                <div style="margin-top: 1.7em;">
                    在教学、竞赛与科研实践中，指导学生团队完成"图文成雕"项目。该项目于 2025 年荣获数字中国创新大赛人工智能赛道一等奖。带领学生团队在 2024 年暑期竞赛中斩获智能汽车创意组全国二等奖及省级奖项两项，助力学校人工智能专业人才培养体系的完善。
                </div>
            </div>
        </div>
    </div>

    <div style="margin-bottom: 4%;"></div>

    <script src="{{ url_for('static', filename='javascripts/Index.js') }}"></script>
    <script>
        var frontEndDomainName = "{{ front_end_domain_name }}";
        var backendDomainName = "{{ backend_domain_name }}";
        
        window.addEventListener('DOMContentLoaded', async function() {
            // 加载工作坊图标
            try {
                const workshopIconUrl = await getIcons(backendDomainName, 'AiWorkShop_icon.png');
                if (workshopIconUrl) {
                    document.getElementById('workshop-icon').src = workshopIconUrl;
                }
            } catch (error) {
                // 如果加载失败，保持为空
            }
            
            // 加载EduBot图标
            try {
                const edubotIconUrl = await getIcons(backendDomainName, 'AiKeTangJiaoXuePingCeXiTong.png');
                if (edubotIconUrl) {
                    document.getElementById('edubot-icon').src = edubotIconUrl;
                }
            } catch (error) {
                // 如果加载失败，保持为空
            }
            
            // 加载二维码图片
            try {
                const qrCodeUrl = await getQrCode(backendDomainName, 'my_wechat_qr_code.png');
                if (qrCodeUrl) {
                    document.getElementById('qr-code-img').src = qrCodeUrl;
                }
            } catch (error) {
                // 如果加载失败，保持为空
            }
            
            // 加载老师图片
            try {
                const wangLinUrl = await getEdubotTeacherImage(backendDomainName, 'wang_lin.png');
                if (wangLinUrl) {
                    document.getElementById('teacher-wang-lin').src = wangLinUrl;
                }
            } catch (error) {
                // 如果加载失败，保持为空
            }
            
            try {
                const wangFeiFanUrl = await getEdubotTeacherImage(backendDomainName, 'wang_fei_fan.png');
                if (wangFeiFanUrl) {
                    document.getElementById('teacher-wang-fei-fan').src = wangFeiFanUrl;
                }
            } catch (error) {
                // 如果加载失败，保持为空
            }
            
            try {
                const xieZhiXinUrl = await getEdubotTeacherImage(backendDomainName, 'xie_zhi_xin.png');
                if (xieZhiXinUrl) {
                    document.getElementById('teacher-xie-zhi-xin').src = xieZhiXinUrl;
                }
            } catch (error) {
                // 如果加载失败，保持为空
            }
            
            // 初始化轮播图第一张
            try {
                const firstImageUrl = await getAllPeopleImage(backendDomainName, '1.png');
                if (firstImageUrl) {
                    document.getElementById('carousel-img-1').src = firstImageUrl;
                }
            } catch (error) {
                // 如果加载失败，保持为空
            }
        });
        
        function showQrModal() {
            document.getElementById('qrModal').style.display = 'flex';
        }
        function hideQrModal() {
            document.getElementById('qrModal').style.display = 'none';
        }
        document.getElementById('closeQrModal').onclick = hideQrModal;
        document.getElementById('qrModal').onclick = function(e) {
            if (e.target === this) hideQrModal();
        };
        document.querySelectorAll('.nav-links a[href="/contact"], .nav-links a[href="/suggest"]').forEach(function(el) {
            el.onclick = function(e) {
                e.preventDefault();
                showQrModal();
            };
        });
        document.getElementById('nav-center-link').onclick = function(e) {
            e.preventDefault();
            window.location.href = frontEndDomainName + '/navigation_page';
        };
        document.getElementById('experience-link').onclick = function(e) {
            e.preventDefault();
            window.location.href = frontEndDomainName + '/navigation_page';
        };
        
        var carouselImageNames = ['1.png', '2.png', '3.png', '4.png', '5.png', '6.png'];
        var idx = 0;
        var img1 = document.getElementById('carousel-img-1');
        var img2 = document.getElementById('carousel-img-2');
        var showingFirst = true;
        
        async function updateCarousel() {
            var nextIdx = (idx + 1) % carouselImageNames.length;
            try {
                const nextImageUrl = await getAllPeopleImage(backendDomainName, carouselImageNames[nextIdx]);
                
                if (nextImageUrl) {
                    if (showingFirst) {
                        img2.src = nextImageUrl;
                        img2.style.opacity = 1;
                        img1.style.opacity = 0;
                    } else {
                        img1.src = nextImageUrl;
                        img1.style.opacity = 1;
                        img2.style.opacity = 0;
                    }
                }
                idx = nextIdx;
                showingFirst = !showingFirst;
            } catch (error) {
                // 如果加载失败，保持当前状态
            }
        }
        
        setInterval(updateCarousel, 3000);
    </script>
</body>
</html>
